<template>
  <view>
    <simple-image :src="info.src" width="100%" height="300rpx"></simple-image>
    <view class="color-bg-fff padding-10">
      <view class="font-weight font-16 color-333">{{ info.title }}</view>
      <view class="color-999 font-12 margin-top-5">价格：{{ info.price }} | 参与学员：{{info.participants}}人</view>
    </view>
    <view class="margin-top-10 color-bg-fff">
      <u-tabs :list="list" @click="onTabTap" :current="tabIndex" lineColor="#5BA2F9"
          :activeStyle="{ color: '#333333', }" :inactiveStyle="{ color: '#999999' }" itemStyle="height: 90rpx;" />
      <view style="height: 710rpx;overflow: auto;">
        <!-- 班级详情 -->
        <view v-if="tabIndex === 0" class="padding-10">
          <view>{{ info.content }}</view>
        </view>
        <!-- 课程章节 - 暂时隐藏 -->
        <!-- <view v-else-if="tabIndex === 1" class="padding-10">
          <u-collapse>
            <u-collapse-item v-for="chapter in chapters" :key="chapter.id" :title="chapter.title">
              <view v-for="(section, sidx) in chapter.sections" :key="sidx" class="padding-5">
                {{ section }}
              </view>
            </u-collapse-item>
          </u-collapse>
        </view> -->
        <!-- 班级评论 - 暂时隐藏 -->
        <!-- <view v-else-if="tabIndex === 2" class="padding-10">
          <view v-for="(comment, idx) in comments" :key="idx" class="margin-bottom-15">
            <view class="flex-between">
              <view class="font-14 color-333">{{ comment.user }}</view>
              <view class="flex-start">
                <u-rate :count="5" :value="comment.rate" readonly size="20"></u-rate>
                <view class="font-12 color-999 margin-left-5">{{ comment.date }}</view>
              </view>
            </view>
            <view class="font-12 color-666 margin-top-5">{{ comment.content }}</view>
          <u-line margin="30rpx 0"></u-line>
          </view>
        </view> -->
        <!-- 讲义课件 - 暂时隐藏 -->
        <!-- <view v-else-if="tabIndex === 3" class="padding-10">
          <view v-for="file in files" :key="file.id" class="flex-between margin-bottom-10 padding-y-5">
            <view class="font-14 color-333">{{ file.name }}</view>
            <u-icon @click="downloadFile(file)" name="download" color="#5BA2F9" size="24"></u-icon>
          </view>
        </view> -->
        <!-- 培训课程 -->
        <view v-else-if="tabIndex === 1" class="padding-10">
          <view v-if="courses && courses.length > 0">
            <view v-for="course in courses" :key="course.id" class="course-item margin-bottom-15">
              <view class="course-header flex-between margin-bottom-10">
                <view class="course-title font-16 font-weight color-333">{{ course.courseName }}</view>
                <view class="course-code color-999 font-12">{{ course.courseCode }}</view>
              </view>
              
              <view class="course-image margin-bottom-10" v-if="course.courseImage">
                <simple-image 
                  :src="getCourseImageUrl(course.courseImage)" 
                  width="100%" 
                  height="300rpx" 
                  radius="10rpx">
                </simple-image>
              </view>
              
              <view class="course-detail color-666 font-14 margin-bottom-10" v-if="course.courseDetail">
                <text class="course-detail-text">{{ course.courseDetail }}</text>
              </view>
              
              <view class="course-info flex-between">
                <view class="price-info">
                  <text class="current-price color-redFont font-16 font-weight">￥{{ course.currentPrice }}</text>
                  <text class="original-price color-999 font-12 margin-left-5" v-if="course.originalPrice && course.originalPrice !== course.currentPrice">
                    ￥{{ course.originalPrice }}
                  </text>
                </view>
                <view class="participant-info color-999 font-12">
                  {{ course.participantCount }}人学习
                </view>
              </view>
              
              <u-line margin="30rpx 0" v-if="courses.indexOf(course) < courses.length - 1"></u-line>
            </view>
          </view>
          
          <view v-else class="empty-state text-center padding-20">
            <view class="color-999 font-14">暂无关联课程</view>
          </view>
        </view>
        <view v-else-if="tabIndex === 2" class="padding-10">
          <view>{{ info.classManager }}</view>
          <view>{{ info.classContact }}</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="padding-x-10">
        <u-button shape="circle" color="#5BA2F9" @click="tabIndex = 2">立即报名</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config'
const baseUrl = config.baseUrl
import { getClassDetail } from '@/api/course/class'

  export default {
    data() {
      return {
        classId: null, // 班次ID
        courses: [], // 关联课程列表
        info:{
          src:'',
          title: '',
          tag: '',
          participants: '',
          originalPrice: '',
          price: '',
          content:'',
        },
        tabIndex:0,
        list: [
          { name: '班级详情', id: 0 },
          // { name: '课程章节', id: 1 },
          // { name: '班级评论', id: 2 },
          // { name: '讲义课件', id: 3 },
          { name: '培训课程', id: 4 },
          { name: '班级报名', id: 5 },
        ],
        chapters: [
          { id: 1, title: '第一章 绪论', sections: ['1.1 桥梁概述', '1.2 桥梁分类'] },
          { id: 2, title: '第二章 施工准备', sections: ['2.1 施工组织', '2.2 材料准备'] }
        ],
        comments: [
          { user: '张三', rate: 5, content: '课程讲解很细致，受益匪浅！' ,date:'2023-01-01'},
          { user: '李四', rate: 4, content: '内容丰富，值得学习。',date:'2023-01-01' }
        ],
        files: [
          { id: 1, name: '讲义1.pdf', url: '/static/files/lecture1.pdf' },
          { id: 2, name: '课件2.ppt', url: '/static/files/lecture2.ppt' }
        ],
        schedules: [
          { id: 1, title: '第一周', items: ['周一：开班仪式', '周三：基础知识'] },
          { id: 2, title: '第二周', items: ['周一：实操演练', '周五：结业考试'] }
        ]
      }
    },
    onLoad(options) {
      // 获取路由参数中的班次ID
      if (options.id) {
        this.classId = options.id
        this.loadClassDetail()
      }
    },
    methods: {
      // 加载班次详情数据
      async loadClassDetail() {
        if (!this.classId) {
          uni.showToast({
            title: '班次ID不能为空',
            icon: 'none'
          })
          return
        }
        
        try {
          uni.showLoading({
            title: '加载中...'
          })
          const response = await getClassDetail(this.classId)
          if (response.code === 200 && response.data) {
            const classData = response.data
            
            // 更新班次基本信息
            this.info = {
              src: baseUrl + classData.coverImage ,
              title: classData.className,
              tag: classData.classTag,
              participants: classData.studentCount,
              originalPrice: classData.originalPrice,
              price: classData.currentPrice,
              content: classData.classDescription,
              classManager: classData.classManager,
              classContact: classData.classContact,
            }
            
            // 更新关联课程数据
            if (classData.courses && classData.courses.length > 0) {
              this.courses = classData.courses
            } else {
              this.courses = []
            }
            
            // 如果有课件文件数据
            if (classData.files && classData.files.length > 0) {
              this.files = classData.files.map(file => ({
                id: file.id,
                name: file.fileName,
                url: file.fileUrl
              }))
            }
            
            // 如果有课程表数据
            if (classData.schedules && classData.schedules.length > 0) {
              this.schedules = classData.schedules.map(schedule => ({
                id: schedule.id,
                title: schedule.title,
                items: schedule.items || []
              }))
            }
            
          } else {
            uni.showToast({
              title: response.msg || '获取班次详情失败',
              icon: 'none'
            })
          }
        } catch (error) {
          console.error('加载班次详情失败:', error)
          uni.showToast({
            title: '网络错误，请稍后重试',
            icon: 'none'
          })
        } finally {
          uni.hideLoading()
        }
      },
      onTabTap({index}) {
        this.tabIndex = index;
      },
      downloadFile(file) {
        // 这里只做演示，实际下载逻辑需根据平台API实现
        uni.showToast({ title: `下载：${file.name}`, icon: 'none' });
      },
      
      // 获取课程图片URL（处理多张图片的情况）
      getCourseImageUrl(courseImage) {
        if (!courseImage) {
          return '/static/images/index-bg.png'
        }
        // 如果有多张图片，用逗号分隔，取第一张
        const images = courseImage.split(',')
        return baseUrl + images[0] || '/static/images/index-bg.png'
      }
    }
  }
</script>

<style lang="scss" scoped>
.bottom{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 30rpx 20rpx 40rpx 20rpx;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.course-item {
  background: #f8f9fa;
  border-radius: 20rpx;
  padding: 20rpx;
  
  .course-header {
    .course-title {
      flex: 1;
      margin-right: 20rpx;
    }
  }
  
  .course-detail-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.5;
  }
  
  .price-info {
    .original-price {
      text-decoration: line-through;
    }
  }
}

.empty-state {
  padding: 100rpx 0;
}
</style>